<!DOCTYPE html>
<html lang="ch" xmlns:th="https://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>V视界后台管理</title>
    <link rel="stylesheet" href="../iconfont/iconfont.css" type="text/css" th:href="@{/static/iconfont/iconfont.css}">
    <link rel="stylesheet" href="../css/backstage.css" th:href="@{/static/css/backstage.css}">
    <link rel="stylesheet" href="../customAlertConfirm/customAlertConfirm.css" th:href="@{/static/customAlertConfirm/customAlertConfirm.css}">

</head>
<style>
    .pageBox {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .checkNextPage,
    .checkPrePage,
    .pass {
        margin: 0 10px;
    }
</style>
<body>
<div class="outerBox">
    <div class="headerBox">
        <div class="logoBox">
            <img src="../img/logo.png" alt="logo" class="logo" th:src="@{/static/img/logo.png}">
        </div>
        <div class="titleBox">
            <h1>V视界后台管理</h1>
        </div>
        <div class="managerBox">
            <span>你好,<i th:text="${username}">username</i></span>
            <a th:href="@{/manager/managerLogout}" class="exit">退出</a>
        </div>
    </div>
    <div class="navBox">

        <ul class="navList userNav">
            <a th:href="@{/user/userList}">
                <li class="navLi">
                    <i class="iconfont icon-geren">用户管理</i>
                </li>
            </a>
            <a th:href="@{/manager/getHotSearchBlog}">
                <li class="navLi">
                    <i class="iconfont icon-bowenshu">博文管理</i>
                </li>
            </a>
            <li class="navLi active">
                <i class="iconfont icon-shenhe">博文审核</i>
            </li>
            <a th:href="@{/manager/typeList}">
                <li class="navLi">
                    <i class="iconfont icon-leimupinleifenleileibie">类别管理</i>
                </li>
            </a>
            <a th:href="@{/manager/getReportForManager}" methods="post">
                <li class="navLi">
                    <i class="iconfont">&#xe6d6;举报处理</i>
                </li>
            </a>
        </ul>
    </div>
    <div class="opeBox">
        <ul class="opeList">
            <li class="opeLi show">
                <div class="blogCheck" th:each="blogs:${pageBean.rows}">
                    <h2 class="opeTitle">审核</h2>
                    <div class="showBlog" >
                        <div class="userInfo">
                            <img src="../img/logo.png" alt="头像" class="headPhoto" th:src="@{${blogs.userAvatarUrl}}">
                            <p class="userName" th:text="${blogs.username}">用户名称</p>
                            <p class="postTime" th:text="${blogs.time}">发布时间</p>
                        </div>
                        <div class="blogContent">
                            <div class="blogText" th:text="${blogs.text}">
                                文字内容
                            </div>
                            <div class="blogImg">
                                <div th:each="picture:${blogs.pictureUrl}" >
                                    <img alt="博客图片" th:src="@{${picture}}">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="pageBox checkPage">
                        <div style="display: flex;flex-wrap: wrap">
                            <button class="checkPrePage"><</button>
                            <form th:action="@{/blog/passTheAudit}">
                                <button name="id" type="submit" class="pass" th:value="${blogs.id}">通过</button>
                            </form>
                            <button class="showCheckPage showPage" style="width: 35px;cursor: inherit;">0</button>
                            <form th:action="@{/blog/notPassTheAudit}">
                                <button name="id" type="submit" class="pass" th:value="${blogs.id}">不通过</button>
                            </form>
                            <button class="checkNextPage" name="pageNo" >></button>
                        </div>
                        <div class="showCheckTotalPage showTotalPage">剩余0条待审核</div>
                        <div>
                            <form class="checkPageForm pageForm" th:action="@{/blog/getAuditBlogList}" method="get">
                                到第<input type="number" name="pageNo" class="checkPageNo"  step="any">页
                                <button>跳转</button>
                            </form>
                            <form class="hiddenCheckPageForm hidden" th:action="@{/blog/getAuditBlogList}" style="display: none">
                                <input name="pageNo" class="hiddenCheckPageNo">
                            </form>
                        </div>
                        <script type="text/javascript" th:inline="javascript">
                            let value=[[${pageBean.rows}]]
                            console.log(value)
                            var blogPageCount = sessionStorage.getItem('blogPageCount') || 1
                            console.log(blogPageCount)
                            let totalNumber=[[${pageBean.total}]]
                            const showCheckTotalPage=document.querySelector('.showCheckTotalPage')
                            const showCheckPage=document.querySelector('.showCheckPage')
                            const checkPrePage=document.querySelector('.checkPrePage')
                            const checkNextPage=document.querySelector('.checkNextPage')
                            const hiddenCheckPageForm=document.querySelector('.hiddenCheckPageForm')
                            const checkPageForm=document.querySelector('.checkPageForm')

                            showCheckPage.innerHTML=`${blogPageCount}`
                            showCheckTotalPage.innerHTML=`剩余${totalNumber}条待审核`
                            // const checkPageNo= document.querySelector('.checkPageNo')
                            checkPrePage.addEventListener('click', () => {
                                // 判断页码数大小，小于等于1则返回，并提示信息
                                if (blogPageCount <= 1) {
                                    showCustomAlert('当前已是第一条未审核博文', false)
                                    return
                                }
                                // 若没问题则对blogPageCount--，调用方法重新渲染用户信息
                                blogPageCount--
                                console.log(blogPageCount)
                                updatePageNumber()
                            })

                            checkNextPage.addEventListener('click', () => {
                                // 大于等于最大页码数时，返回，提示信息
                                if (blogPageCount >= totalNumber) {
                                    showCustomAlert('当前已是最后一条未审核博文', false)
                                    return
                                }
                                // 否侧进行++，调用方法
                                blogPageCount++
                                console.log(blogPageCount)
                                updatePageNumber()
                            })
                            function updatePageNumber() {
                                // 将blogPageCount储存在会话储存中，防止页面刷新导致blogPageCount丢失
                                sessionStorage.setItem('blogPageCount', blogPageCount)
                                hiddenCheckPageForm.pageNo.value = blogPageCount
                                hiddenCheckPageForm.submit()
                            }
                            checkPageForm.addEventListener('submit',(e)=>{
                                e.preventDefault()
                                if(checkPageForm.pageNo.value<=0||checkPageForm.pageNo.value>totalNumber||!(checkPageForm.pageNo.value%1 === 0)){
                                    showCustomAlert('输入的页码数有误，请重新输入',false)
                                    checkPageForm.reset()
                                }else{
                                    blogPageCount=checkPageForm.pageNo.value
                                    sessionStorage.setItem('blogPageCount', blogPageCount)
                                    checkPageForm.submit()
                                }
                            })

                        </script>
                    </div>
                </div>
            </li>
        </ul>
    </div>
</div>
</body>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="../../static/customAlertConfirm/customAlertConfirm.js" th:src="@{/static/customAlertConfirm/customAlertConfirm.js}"></script>
</html>